<!-- 
    Security Knowledge Framework is an expert system application 
    that uses OWASP Application Security Verification Standard, code examples,
    helps developers in pre-development and post-development.  
    Copyright (C) 2020  Glenn ten Cate, Riccardo ten Cate

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->
<!--main content start-->
<section id="main-content" class="checklist-manage">
		<section class="intro">
			<div class="inner">
				<div class="text">
					<h1>Manage your checklists!</h1>
					<p>From here we can create new checklist types and add checklist items to them. Here we also create the questionares and correlate the requirements to the questions. </p>
				</div>
			</div>
		</section>
		<section class="wrapper">
			<div class="row mt">
				<div class="col-lg-12">
					<div class="content-panel">
						<div class="row">
							<div class="col-md-6">
								<div class="card">
									<div class="card-header" style="text-align:center;">
										Add checklist items
									</div>
									<div class="card-block">
										<ngb-tabset>
											<ngb-tab>
												<ng-template ngbTabTitle><b>Icon</b></ng-template>
												<ng-template ngbTabContent>
													<div class="content-panel selection four">
														<br/>
														<a routerLink="/checklist-add-new/{{idFromURL}}" id="checklist-add-new-icon">
															<span class="icon"><i class="fa fa-list-alt fa-4x"></i></span>
														</a>
													</div>
												</ng-template>
											</ngb-tab>
											<ngb-tab>
												<ng-template ngbTabTitle><b>Information</b></ng-template>
												<ng-template ngbTabContent>
													<br/>
													<p><b>Add checklist items</b></p>
													<p>Add your security requirments to the checklist type and select of it needs to be included for each sprint, or just once? We can also correlate the item to a Knowledgebase id</p>
												</ng-template>
											</ngb-tab>
										</ngb-tabset>
									</div>
									<div class="card-footer text-muted text-center">
								<span class="name">Checklist items</span>
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="card">
									<div class="card-header" style="text-align:center;">
										 Manage questionaire
									</div>
									<div class="card-block">
										<ngb-tabset>
											<ngb-tab>
												<ng-template ngbTabTitle><b>Icon</b></ng-template>
												<ng-template ngbTabContent>
													<div class="content-panel selection four">
														<br/>
														<a routerLink="/questionnaire-sprint/{{idFromURL}}" id="questionnaire-sprint-icon" name="questionnaire-sprint-icon">
															<span class="icon"><i class="fa fa-question-circle fa-4x"></i></span>
														</a>
													</div>
												</ng-template>
											</ngb-tab>
											<ngb-tab>
												<ng-template ngbTabTitle><b>Information</b></ng-template>
												<ng-template ngbTabContent>
													<br/>
													<p><b>Sprint questionaire</b></p>
													<p>These questions should be more generic and go more in depth on the type of function that is being developed, as wel as technology stacks.</p>
												</ng-template>
											</ngb-tab>
										</ngb-tabset>
									</div>
									<div class="card-footer text-muted text-center">
										<span class="name">Sprint questionaire</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div *ngIf="projects" class="row mt">
				<div class="col-lg-12">
					<h3>All projects</h3>
					<div class="content-panel">
					<table class="table table-striped table-advance table-hover">
						<thead>
						<tr>
							<th><i class="fa fa-bullhorn"></i> Project Name</th>
							<th class="hidden-phone"><i class="fa fa-question-circle"></i> Description</th>
							<th><i class="fa fa-clock-o"></i> Creation date</th>
							<th><i class="fa fa-bookmark"></i> Project version</th>
							<th><i class="fa fa-times"></i> Delete</th>
						</tr>
						</thead>
						<tbody>
						<tr *ngFor="let project of projects; let myIndex = index">
							<td [routerLink]="['/project-dashboard',project.project_id]" style="color:#515594" >{{project.project_name}}</td>
							<td [routerLink]="['/project-dashboard',project.project_id]" >{{project.project_description}}</td>
							<td [routerLink]="['/project-dashboard',project.project_id]" ><span class="label">{{project.timestamp}}</span></td>
							<td [routerLink]="['/project-dashboard',project.project_id]" >{{project.project_version}}</td>
							<td>
							<button (click)="open(content)" class="btn-danger btn-xs">
								<i class="fa fa-times "></i>                 
							</button>
							</td>
							<ng-template #content let-c="close" let-d="dismiss">
							<div class="modal-header">
								<h4 class="modal-title">Delete checklist!</h4>
								<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
								<span aria-hidden="true">&times;</span>
							</button>
							</div>
							<div class="modal-body">
								<p>Are you sure you want to delete this checklist?</p>
							</div>
							<div class="modal-footer">      
								<button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
								<button type="button" class="btn btn-danger" (click)="deleter(project.project_id)" (click)="c('Close click')" >Delete</button>
							</div>
							</ng-template>
						</tr>
						</tbody>
					</table>
					</div>
				</div>
			</div>
	
		</section>
		<!--/wrapper -->
	</section>
	<!-- /MAIN CONTENT -->
	<!--main content end-->